/* 主题变量定义 */
:root {
    --theme-bg-hover: rgba(255, 255, 255, 0.1);

    /** 侧边栏变量 */
    --theme-sidebarWidth: 200px;
    --theme-sidebar-background: linear-gradient(3deg, #f9fbff 0%, #e2ebff 100%);

    --theme-menu-border: 1px solid rgba(0, 0, 0, 0.07);

    --theme-menu-title-hover-background: #fff;
    --theme-menu-title-active-background: #fff;
    --theme-menu-title-text: #9c9fa5;
    --theme-menu-title-hover-text: #9c9fa5;
    --theme-menu-title-active-text: #1677ff;

    --theme-menu-item-hover-background: rgba(0, 0, 0, 0.05);
    --theme-menu-item-active-background: #fff;
    --theme-menu-item-text: #9c9fa5;
    --theme-menu-item-active-text: #1677ff;
    --theme-menu-item-hover-text: #9c9fa5;

    /** 头部变量 */
    --theme-header-background: #e4edff;
    --theme-header-border: 1px solid rgba(0, 0, 0, 0.1);
    --theme-header-text: #262626;
    --theme-headerHeight: 50px;

    /** Breadcrumb */
    --theme-breadcrumb-default-text: #97a8be;
    --theme-breadcrumb-active-text: #333;

    /** ThemeSwitch */
    --theme-ThemeSwitch: #000;

    /** Tabs */
    --theme-tabs-backgorund: #fff;
    --theme-tabs-color: #97a8be;
    --theme-tabs-border: rgba(0, 0, 0, 0.1);
    --theme-tabs-active-color: #1677ff;
    --theme-tabs-active-border: #1677ff;

    /** 布局变量 */
    --theme-text: #262626;
    --theme-background: linear-gradient(3deg, #f9fbff 0%, #e2ebff 100%);
    --theme-logo-text: #000;

    /** Card 组件变量 */
    --theme-card-background: #fff;
    --theme-card-border: #d9d9d9;
    --theme-card-shadow:
        0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
    --theme-card-title-color: rgba(0, 0, 0, 0.88);
    --theme-card-text-color: rgba(0, 0, 0, 0.88);

    /** JSON 转换器变量 */
    --theme-json-converter-bg: #fff;
    --theme-json-converter-border: #e5e7eb;
    --theme-json-converter-header-bg: #f9fafb;
    --theme-json-converter-header-text: #374151;
    --theme-json-converter-header-subtitle: #6b7280;
    --theme-json-converter-input-bg: #fff;
    --theme-json-converter-input-text: #111827;
    --theme-json-converter-input-placeholder: #9ca3af;
    --theme-json-converter-resizer-bg: #e5e7eb;
    --theme-json-converter-resizer-hover: #a3aed0;
    --theme-json-converter-viewer-bg: #fff;
    --theme-json-converter-viewer-text: #111827;
    --theme-json-converter-viewer-placeholder: #6b7280;

    /** 滚动条（浅色主题） */
    --theme-scrollbar-bg: transparent;
    --theme-scrollbar-thumb: rgba(0, 0, 0, 0.2);
    --theme-scrollbar-thumb-hover: rgba(0, 0, 0, 0.35);
    --theme-scrollbar-corner: transparent;
    --theme-scrollbar-width: thin; /* auto | thin | none */

    /** 通用字体颜色变量 */
    --theme-text-primary: rgba(0, 0, 0, 0.88);
    --theme-text-secondary: rgba(0, 0, 0, 0.6);
    --theme-text-tertiary: rgba(0, 0, 0, 0.4);
    --theme-text-quaternary: rgba(0, 0, 0, 0.2);
    --theme-text-disabled: rgba(0, 0, 0, 0.1);
    --theme-text-hover: #1677ff;

    /** 权限管理变量 */
    --permission-primary-color: #1890ff;
    --permission-primary-hover: #40a9ff;
    --permission-danger-color: #ff4d4f;
    --permission-danger-hover: #ff7875;
    --permission-success-color: #52c41a;
    --permission-warning-color: #faad14;

    /**背景色*/
    --permission-bg-primary: #ffffff;
    --permission-bg-secondary: #fafafa;
    --permission-bg-tertiary: #f5f5f5;
    --permission-toolbar-bg: #ffffff;
    --permission-modal-header-bg: #ffffff;
    --permission-modal-body-bg: #ffffff;
    --permission-table-header-bg: #fafafa;
    --permission-table-row-hover-bg: #f5f5f5;
    --permission-avatar-bg: #f0f0f0;

    /**文字颜色*/
    --permission-text-primary: #262626;
    --permission-text-secondary: #8c8c8c;
    --permission-text-disabled: #bfbfbf;
    --permission-text-inverse: #ffffff;
    --permission-table-header-color: #262626;

    /**边框颜色*/
    --permission-border-primary: #d9d9d9;
    --permission-border-secondary: #f0f0f0;
    --permission-toolbar-border: #d9d9d9;
    --permission-modal-border: #d9d9d9;
    --permission-table-border-color: #f0f0f0;

    /**输入框*/
    --permission-input-bg: #ffffff;
    --permission-input-border: #d9d9d9;
    --permission-input-color: #262626;

    /**图标颜色*/
    --permission-icon-color: #8c8c8c;

    /**阴影变量*/
    --permission-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.06);
    --permission-shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
    --permission-shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.15);
}

[data-theme='dark'] {
    /** 侧边栏变量 */
    --theme-sidebarWidth: 200px;
    --theme-sidebar-background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1f1f1f 100%);

    --theme-menu-border: 1px solid rgba(255, 255, 255, 0.08);

    --theme-menu-title-hover-background: rgba(255, 255, 255, 0.05);
    --theme-menu-title-active-background: #141414;
    --theme-menu-title-text: #a0a0a0;
    --theme-menu-title-hover-text: #e0e0e0;
    --theme-menu-title-active-text: #fff;

    --theme-menu-item-hover-background: rgba(0, 0, 0, 0.05);
    --theme-menu-item-active-background: #141414;
    --theme-menu-item-text: #b8b8b8;
    --theme-menu-item-active-text: #fff;
    --theme-menu-item-hover-text: #e0e0e0;

    /** 头部变量 */
    --theme-header-background: linear-gradient(90deg, #1f1f1f 0%, #2a2a2a 100%);
    --theme-header-text: #e0e0e0;
    --theme-header-border: 1px solid rgba(255, 255, 255, 0.08);

    /** Breadcrumb  */

    --theme-breadcrumb-active-text: #fff;
    --theme-breadcrumb-default-text: #97a8be;

    /** ThemeSwitch */
    --theme-ThemeSwitch: #fff;

    /** Tabs */
    --theme-tabs-backgorund: #fff;
    --theme-tabs-color: #97a8be;
    --theme-tabs-border: #e4e7ed;
    --theme-tabs-active-color: #fff;
    --theme-tabs-active-border: #fff;

    /** 布局变量 */
    --theme-text: #b8b8b8;
    --theme-background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #0d0d0d 100%);
    --theme-logo-text: #b8b8b8;
    --theme-headerHeight: 50px;

    /** 通用背景色变量 */
    --theme-bg-primary: #0f0f0f;
    --theme-bg-secondary: #1a1a1a;
    --theme-bg-tertiary: #1e1e1e;
    --theme-bg-quaternary: #2a2a2a;
    --theme-bg-card: #1e1e1e;
    --theme-bg-modal: #1a1a1a;
    --theme-bg-overlay: rgba(0, 0, 0, 0.8);
    --theme-bg-hover: rgba(255, 255, 255, 0.05);
    --theme-bg-active: #141414;
    --theme-bg-disabled: rgba(255, 255, 255, 0.02);

    /** 通用边框色变量 */
    --theme-border-primary: rgba(255, 255, 255, 0.08);
    --theme-border-secondary: rgba(255, 255, 255, 0.06);
    --theme-border-tertiary: rgba(255, 255, 255, 0.12);
    --theme-border-focus: rgba(255, 255, 255, 0.2);
    --theme-border-error: rgba(255, 77, 79, 0.6);
    --theme-border-success: rgba(82, 196, 26, 0.6);
    --theme-border-warning: rgba(250, 173, 20, 0.6);
    --theme-border-info: rgba(24, 144, 255, 0.6);

    /** 通用字体颜色变量 */
    --theme-text-primary: rgba(255, 255, 255, 0.88);
    --theme-text-secondary: rgba(255, 255, 255, 0.6);
    --theme-text-tertiary: rgba(255, 255, 255, 0.4);
    --theme-text-quaternary: rgba(255, 255, 255, 0.2);
    --theme-text-disabled: rgba(255, 255, 255, 0.1);
    --theme-text-hover: #1677ff;

    /** 权限管理变量（暗色主题） */
    --permission-primary-color: #177ddc;
    --permission-primary-hover: #3c9be8;
    --permission-danger-color: #d32029;
    --permission-danger-hover: #d9363e;
    --permission-success-color: #49aa19;
    --permission-warning-color: #d89614;

    /**背景色*/
    --permission-bg-primary: #141414;
    --permission-bg-secondary: #1f1f1f;
    --permission-bg-tertiary: #262626;
    --permission-toolbar-bg: #1f1f1f;
    --permission-modal-header-bg: #1f1f1f;
    --permission-modal-body-bg: #141414;
    --permission-table-header-bg: #262626;
    --permission-table-row-hover-bg: #2a2a2a;
    --permission-avatar-bg: #434343;

    /**文字颜色*/
    --permission-text-primary: #ffffff;
    --permission-text-secondary: #a6a6a6;
    --permission-text-disabled: #595959;
    --permission-text-inverse: #000000;
    --permission-table-header-color: #ffffff;

    /**边框颜色*/
    --permission-border-primary: #434343;
    --permission-border-secondary: #303030;
    --permission-toolbar-border: #434343;
    --permission-modal-border: #434343;
    --permission-table-border-color: #303030;

    /**输入框*/
    --permission-input-bg: #262626;
    --permission-input-border: #434343;
    --permission-input-color: #ffffff;

    /**图标颜色*/
    --permission-icon-color: #a6a6a6;

    /**阴影*/
    --permission-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.3);
    --permission-shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.4);
    --permission-shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.5);

    /** Card 组件变量 */
    --theme-card-background: #1e1e1e;
    --theme-card-border: rgba(255, 255, 255, 0.08);
    --theme-card-shadow:
        0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    --theme-card-title-color: rgba(255, 255, 255, 0.88);
    --theme-card-text-color: rgba(255, 255, 255, 0.88);

    /** JSON 转换器变量 */
    --theme-json-converter-bg: #1e1e1e;
    --theme-json-converter-border: rgba(255, 255, 255, 0.08);
    --theme-json-converter-header-bg: #2a2a2a;
    --theme-json-converter-header-text: #e0e0e0;
    --theme-json-converter-header-subtitle: #a0a0a0;
    --theme-json-converter-input-bg: #1e1e1e;
    --theme-json-converter-input-text: #e0e0e0;
    --theme-json-converter-input-placeholder: #666;
    --theme-json-converter-resizer-bg: rgba(255, 255, 255, 0.08);
    --theme-json-converter-resizer-hover: rgba(255, 255, 255, 0.2);
    --theme-json-converter-viewer-bg: #1e1e1e;
    --theme-json-converter-viewer-text: #e0e0e0;
    --theme-json-converter-viewer-placeholder: #666;

    /** 滚动条（深色主题） */
    --theme-scrollbar-bg: transparent;
    --theme-scrollbar-thumb: rgba(255, 255, 255, 0.25);
    --theme-scrollbar-thumb-hover: rgba(255, 255, 255, 0.4);
    --theme-scrollbar-corner: transparent;
    --theme-scrollbar-width: thin;
}

/* 全局主题应用 */
body {
    background-color: var(--theme-background);
    color: var(--theme-text);
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}
.logo-container {
    color: var(--theme-logo-text) !important;
}

/* 侧边栏主题样式 */
.sidebar-container {
    background: var(--theme-sidebar-background) !important;
    width: var(--theme-sidebarWidth) !important;
    transition: all 0.28s ease;
}

/* 主容器主题样式 */
.main-container {
    margin-left: var(--theme-sidebarWidth) !important;
    background: var(--theme-background) !important;
    transition: all 0.28s ease;
}

/* 头部主题样式 */
.header-container {
    background: var(--theme-header-background) !important;
    color: var(--theme-header-text) !important;
    height: var(--theme-headerHeight) !important;
    border-bottom: var(--theme-header-border);
    transition: all 0.3s ease;
}
